<template>
  <view class="feedback-container">
    <!-- 反馈意见 -->
    <view class="input-cell">
      <u-input
        v-model="formData.feedback_content"
        type="textarea"
        :border="false"
        maxlength="200"
        height="200"
        placeholder="请填写你要反馈的问题，以便我们更好的帮助"
        class="input-cell-item" />
    </view>

    <!-- 上传图片 -->
    <title title="相关截图(选填)" :custom-style="{
      'marginBottom': '24rpx',
      'marginTop': '24rpx',
      'fontSize': '28rpx',
      'fontWeight': '700',
      'color': '#333'
    }"></title>

    <view class="upload-image-cell">
      <Upload
      ref="uUpload"
      :action="action"
      :header="{
        'Authorization': 'Bearer ' + token // token
      }"
      height="200"
      upload-text="上传相关图片"
      :limitType="limitType"
      :source-type="['album']"
      :max-count="maxCount"
      :type="uploadType"
      del-bg-color="#56d39d"
      :auto-upload="false"
      @on-uploaded="uploadSuccess"></Upload>
    </view>

    <!-- 联系方式 -->
    <title title="联系方式(选填)" :custom-style="{
      'marginBottom': '24rpx',
      'marginTop': '24rpx',
      'fontSize': '28rpx',
      'fontWeight': '700',
      'color': '#333'
    }"></title>

    <view class="input-cell">
      <u-input
        v-model="formData.contacts"
        type="text"
        :border="false"
        placeholder="请手机号码或邮箱"
        class="input-cell-item" />
    </view>

    <view class="sumbit-button" @click="sumbitMerchantApply">确定提交</view>
  </view>
</template>

<script>
import { sumbitFeedback } from '@/api/user';
import Upload from '@/components/upload/upload';
import { mapGetters } from 'vuex';
import config from '@/utils/config';
export default {
  components: {
    Upload
  },
  data() {
    return {
      name: 'feedback',
      limitType: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp'],
      maxCount: 3,
      uploadType: 'image',
      action: `${config.baseApi}/client/upload/uploadImg`,
      value: '',
      formData: {
        feedback_content: '',
        feedback_image: [],
        contacts: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  methods: {

    // 提交反馈
    sumbitMerchantApply() {
      if (!this.formData.feedback_content) {
        uni.showToast({
          title: '请输入你要反馈的问题',
          icon: 'none',
          mask: false,
        })
        return;
      }
      uni.showToast({
        title: '提交中...',
        icon: 'loading',
        mask: true,
        duration: 20 * 1000
      });
      this.$refs.uUpload.upload();
    },

    // 上传图片成功
    uploadSuccess(data) {
      if (data && data.length > 0) {
        const imageList = data.map(item => {
          return item.response.data.cover_path
        })
        this.formData.feedback_image = imageList;
        sumbitFeedback(this.formData).then(result => {
          if (result && result.code === 200) {
            uni.showToast({
              title: '提交成功！',
              icon: 'success',
              duration: 3 * 1000
            });
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/mine/index'
              })
            }, 800)
          }
        })
      } else {
        sumbitFeedback(this.formData).then(result => {
          if (result && result.code === 200) {
            uni.showToast({
              title: '提交成功！',
              icon: 'success',
              duration: 3 * 1000
            });
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/index?index=4'
              })
            }, 800)
          }
        })
      }
    },
  },
  onShareAppMessage() {}
}
</script>

<style lang="scss">
  page{
    background-color: #f8f8f8;
  }

  .feedback-container{
    padding: 24rpx;

    .question-cell{
      margin-bottom: 24rpx;
      border: 1rpx solid #eaeaea;
      border-radius: 8rpx;
      overflow: hidden;
    }

    .input-cell{
      background: #fff;
      padding: 24rpx;
      border: 1rpx solid #eaeaea;
      border-radius: 8rpx;
      overflow: hidden;
      font-size: 24rpx;
    }

    .upload-image-cell{
      padding: 24rpx;
      background: #fff;
    }

    .sumbit-button{
      background-color: $uni-color-primary;
      color: #ffff;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      margin-top: 40rpx;
    }
  }
</style>
